<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>着色通道</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [120.52950010876321, 30.268289949834518, 1000],
        lookAt: [120.52950010876321, 30.268289949834518, 0],
        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 18,
        ambientLightIntensity: 5,
        ambientLightType: 'hemiSphere',
        useCarpet: true,
        background: "Sky",
        useDefaultTexture: true, //是否使用瓦片默认纹理
        baseLayer: [
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                readableUrl: true,
                tileType: 'image',
            },
        ]
    });

    btn();
    fbx();
    function fbx() {
        let model = new GE.OverLay({
            type: 'fbx',
            url: 'http://localhost:9000/examples/resources/fbx/xqazm.fbx',
            position: [120.52950010876321, 30.268289949834518, 50],
            // scale: [100, 100, 100],
            // rotation: [45, 0, 0],
            success: function () {
                console.log('fbx loaded!');
            }
        });
        app.add(model);
        window.model = model;
    }
    function btn() {
        let button = new GE.Button('全局模糊', function () {
            let visible = !app.postProcess.effectHBlur.enabled;
            app.postProcess.setBlurPass(visible, {
                range: 0.8,
                intensity: 0.1
            })
        });
        app.ui.add(button);

        let button2 = new GE.Button('胶片颗粒', function () {
            let visible = !app.postProcess.filmPass.enabled;
            app.postProcess.setFilmPass(visible, {
                noiseIntensity: 0.5,
                grayscale: false,
            })
        });
        app.ui.add(button2);

        let button3 = new GE.Button('边线发光', function () {
            let visible = !app.postProcess.bloomPass.enabled;
            app.postProcess.setUnrealBloomPass(visible, {
                threshold: 0.5,
                strength: 0.5,
                radius: 0.5,
            })
        });
        app.ui.add(button3);

        let button4 = new GE.Button('景深通道', function () {
            let visible = !app.postProcess.bokehPass.enabled;
            app.postProcess.setBokehPass(visible, {
                focus: 1.0,
                aperture: 0.025,
            })
        });
        app.ui.add(button4);

        let button5 = new GE.Button('锐化', function () {
            let visible = !app.postProcess.sharpenEffect.enabled;
            app.postProcess.setSharpenPass(visible, {
                sharpness: 0.2,
            })
        });
        app.ui.add(button5);

        let button6 = new GE.Button('马赛克', function () {
            let visible = !app.postProcess.pixelPass.enabled;
            app.postProcess.setPixelPass(visible, {
                pixel: 20,
            })
        });
        app.ui.add(button6);
    }
</script>

</html>